<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">提现管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>提现记录</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="queryForm.name" placeholder="请输入内容">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onSubmit">提现设置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="onSubmit">批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%" :border="true" max-height="400" fit="true" >
      <el-table-column prop="id" label="ID" width="50">
      </el-table-column>
      <el-table-column prop="name" label="酒店" width="180">
      </el-table-column>
      <el-table-column prop="withdrawCost" label="提现金额">
      </el-table-column>
      <el-table-column prop="realityCost" label="到账金额">
      </el-table-column>
      <el-table-column prop="username" label="账号">
      </el-table-column>
      <el-table-column prop="type" label="账户类型" width="100">
      </el-table-column>
      <el-table-column prop="time" label="申请时间">
      </el-table-column>
      <el-table-column prop="auditTime" label="审核时间">
      </el-table-column>
      <el-table-column prop="state" label="提现状态" width="100">
      </el-table-column>
      <el-table-column label="操作"  min-width="90" align="center">
        <template slot-scope="scope">
        <el-button type="danger" icon="el-icon-delete" circle  @click="handleDelete(scope.$index, scope.row)"></el-button>
        <el-button type="warning" circle  icon="el-icon-zoom-in"></el-button>
        </template>
      </el-table-column>
    </el-table>

     <div style="text-align: center;margin-top: 20px;">
     			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.page"
     			 :page-sizes="[5, 10, 20, 50]" :page-size="queryForm.rows" layout="total, sizes, prev, pager, next, jumper" :total="queryForm.total">
     			</el-pagination>
     		</div>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        queryForm: {
            page: 1,
            rows: 5,
        		total: 0,
        },
        tableData: []
      }

    },
    created() { //钩子函数
      //先传默认的对象{}参数
      this.doList()
    },
    methods: {

      onSubmit() {
        console.log('submit!');
      },
      doList: function() {
        this.axios.post(this.axios.urls.WITHDRAWAL_LIST, this.queryForm).then((response) => {
          console.log("数据：", response);
          console.log("执行了吗?");
          this.tableData = response.data.result;
          console.log(this.tableData);
          this.queryForm.page = response.data.page
          this.queryForm.rows = response.data.rows
          this.queryForm.total = response.data.total
        });
      },
      handleSizeChange(rows) {
      				//每页显示改变
      				this.queryForm.page = 1
      				this.queryForm.rows = rows
      				this.doList()
      			},
      handleCurrentChange(page) {
        //指定页码跳转
        this.queryForm.page = page
        this.doList()
      },
      // 删除  index：当前页的第几条数据  row：获取当前行的数据
      			handleDelete: function(index, row) {
      				// console.log(row.id);
      				this.$confirm('您确定要删除此客户, 是否继续?', '提示', {
      					confirmButtonText: '确定',
      					cancelButtonText: '取消',
      					type: 'warning'
      				}).then(() => {
      					this.axios.post(this.axios.urls.WITHDRAWAL_UPL, {
      						id: row.id,
      						enabled: 0
      					}).then((response) => {
      						this.$message({
      							message: '删除成功',
      							type: 'success'
      						})
      						this.doList()
      					})
      				}).catch(() => {
      					this.$message({
      						type: 'info',
      						message: '已取消删除'
      					})
      				})
      			},



    }
  }
</script>

<style>

</style>
